<template>
  <div class="highSearch">
    <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
      <el-row>
        <goodsForm :formList="form.list" @input="changelist" @change="changelist" @datechange="changedate"
          @areachange="changearea" />
        <el-col :span="24" class="SearchBtn">
          <el-button type="primary" @click="submitForm" plain>立即搜索</el-button>
          <el-button type="warning" @click="resetForm" plain>清空条件</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import goodsForm from "./GoodsForm.vue";
  import { provinceAndCityDataPlus, CodeToText } from "element-china-area-data";
  export default {
    components: {
      goodsForm,
    },
    props: {},
    data() {
      return {
        form: {
          list: [
            {
              id: 0,
              name: "合作情况",
              type: "select",
              text: "请选择合作情况",
              data: "",
            },
            {
              id: 1,
              name: "供应商名称",
              data: ''
            },
            {
              id: 2,
              name: "联系人",
              data: "",
            },
            {
              id: 3,
              name: "传真",
              data: "",
            },
            {
              id: 4,
              name: "电话",
              data: "",
            },
            {
              id: 5,
              name: "手机号",
              data: "",
            },
            {
              id: 6,
              name: "微信",
              data: "",
            },
            {
              id: 7,
              name: "QQ",
              data: "",
            },
            {
              id: 8,
              name: "邮箱",
              data: "",
            },
            {
              id: 9,
              name: "网址",
              data: "",
            },
            {
              id: 10,
              name: "所在地区",
              type: "area",
              options: provinceAndCityDataPlus, //所在地区省市
              selectedOptions: [],
            },
            {
              id: 11,
              name: "添加日期",
              type: "date",
              data: null,
            },
          ],
          pro: '',
          city: '',
          date1: '',
          date2: ''
        },
      };
    },
    watch: {},
    computed: {},
    methods: {
      // 修改表单数据
      changelist(list) {
        this.form.normalForm = list
      },
      // 修改地区
      changearea(value) {
        this.form.pro = CodeToText[value[0]]
        this.form.city = CodeToText[value[1]]
      },
      // 修改日期
      changedate(value) {
        this.form.date1 = value[0]
        this.form.date2 = value[1]
      },

      // 指定查询
      submitForm() {
        let searchobj = {
          "add_date01": this.form.date1,//添加时间前
          "add_date02": this.form.date2,//添加时间后
          "su_pro": this.form.pro,//省份
          "su_city": this.form.city,//城市
          "su_cooperation": this.form.list[0].data,//合作情况
          "su_name": this.form.list[1].data,//供应商名称
          "su_contact": this.form.list[2].data,//联系人
          "su_phone": this.form.list[4].data,//电话
          "su_tel": this.form.list[5].data,//手机号
          "su_qq": this.form.list[7].data,//QQ号
          "su_address": this.form.list[0].data,//地址
          "su_fax": this.form.list[3].data,//传真
          "su_we": this.form.list[6].data,//微信号
          "su_email": this.form.list[8].data,//邮箱
          "su_web": this.form.list[9].data,//网址
        }
        for (let key in searchobj) {
          console.log(typeof searchobj[key])
          if (searchobj[key] != '') {
            this.$emit('HighSearch', searchobj);
            return
          }
        }
        this.$message({
          type: "warning",
          message: "请输入条件进行查询",
          showClose: true,
        });
      },
      // 清空条件
      resetForm() {
        for (let key in this.form.list) {
          this.form.list[key].data = ''
        }
        this.form.list[10].selectedOptions = ''
        this.formpro = '',
        this.city = '',
        this.date1 = '',
        this.date2 = ''
      }
    },
    created() { },
    mounted() { },
  };
</script>
<style lang="scss" scoped>
  .el-row {
    margin-left: 10%;
  }

  .SearchBtn {
    margin-left: -10%;
    text-align: center;

  }

  button {
    margin-left: 50px;
  }
</style>